<template>
	<view class="grid col-2 ">
		<view v-for="(item,index) in datas" :key="index" class="grid-item" @click="onClickItem" :data-index="index">
			<view class="grid-item-content">
				<view class="boxs-top">
					<image class="loading case-image" lazy-load="true" :src="item.photo"></image>
					<view class="boxs-top-text flex padding-right-xs align-center">
						<view class="tag-prevue flex padding-left-sm padding-right-sm align-center" >
							<text v-if="item.status==1" class="cuIcon-rankfill margin-right-xs"></text>
							<text>{{item.status==0?'预告':'直播'}}</text>
						</view>
						<view class="padding-left-xs padding-right-xs ">  
							{{item.want}}想看
						</view>
					</view>
					<view class="boxs-top-hint ">
						<view class="flex solid-bottom justify-end">
							<text class="cuIcon-likefill text-red-rich"></text>
						</view>
						<view class="margin-top-xs">{{item.like}}人</view>
					</view>
					<view class="boxs-bottom-text">
						<view class="boxs-bottom-title">
							{{item.shop}}
						</view>
					</view>
				</view>
				<view class="boxs-bottom solid-bottom justify-start">
					<view class="image_small_112">
						<image class="cu-image" :src="item.goodsimg"></image>
					</view>

					<view class="shop-photo-text">
						<view class='text-grey case-text-title'>{{item.goodsname}}</view>
						<view class='text-gray case-text-desc'>
							￥{{item.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'journal',
		data() {
			return {

			}
		},
		props: {
			datas: {},
			showbtn: true
		},
		methods: {
			onClickItem(e) {
				//console.log(this.datas);
				var index = e.currentTarget.dataset.index;
				this.$emit('onclick', index);
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var imgs = this.datas.image;
				uni.previewImage({
					current: current,
					urls: imgs
				})
			}

		}
	}
</script>
<!-- StarbbUI -->
<style scoped>
	.grid {
		background: rgba(241, 241, 242, 1);
		padding: 10upx;
	}

	.grid-item {
		padding: 9upx;

	}

	.grid-item-content {
		background-color: #FFFFFF;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(237, 237, 243, 1);
		border-radius: 20upx;
	}

	.case-image {
		height: 340upx;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
	}

	.cu-card {
		margin-top: 2upx;
	}

	.case-text-title {
		font-size: 26upx;
		font-family: PingFang;
		font-weight: 500;
		color: rgba(3, 2, 20, 1);
		line-height: 36upx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.case-text-desc {
		font-size: 32upx;
		font-family: PingFang;
		font-weight: bold;
		color: rgba(246, 71, 174, 1);
		line-height: 36upx;
	}

	.boxs-top-text {
		position: absolute;
		top: 0;
		color: #FFFFFF;
		background: rgba(0, 0, 0, 0.3);
		filter: alpha(opacity=50);
		border-radius: 20upx 0upx 20upx 0upx;
		padding-right: 20upx;
		zoom: 1;
	}

	.boxs-top {
		position: relative;
	}

	.boxs-top-hint {
		position: absolute;
		top: 11upx;
		right: 11upx;
		color: #FFFFFF;
		padding: 6upx;

	}




	.tag-prevue {
		height: 44upx;
		background: orange;
		border-radius: 20upx 0upx 20upx 0upx;
		line-height: 44upx;
	}

	.tag-live-on {

		height: 44upx;
		background: linear-gradient(108deg, rgba(106, 46, 224, 1), rgba(242, 61, 182, 1));
		border-radius: 20upx 0upx 20upx 0upx;

	}

	.boxs-bottom-text {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		color: #FFFFFF;
		padding: 20upx;

	}

	.boxs-bottom-user {
		font-size: 26upx;
		font-family: PingFang;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 44upx;
		margin-left: 10upx;
		display: inline-block;
		vertical-align: middle;
	}

	.boxs-bottom-title {
		font-size: 30upx;
		font-family: PingFang;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 34upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.boxs-bottom-photo {
		border-radius: 50%;
		vertical-align: middle;

	}

	.cu-image{
		width: 100%;
		height: 100%;
		border-radius: 6upx;
	}

	.boxs-bottom {
		display: flex;
		padding: 20upx;
	}

	.shop-photo-text {
		width: 70%;
		margin-left: 17upx;
	}
	.cuIcon-likefill{
		font-size: 36upx;
		padding: 0;
	}
	.cuIcon-rankfill{
		font-size: 20upx;
	}
</style>
